<template>
  <div class="operation-group-container">
    <div class="operation-group-main-container" @click="onClickSwitchMainItem">
      <ContentBlock
        class="group-main-container"
        v-for="item in operationGroupData"
        :key="item.id"
        :data-key="item.id"
      >
        <div
          class="group-main-text"
          :class="{ 'group-main-text_active': mainKey == item.id }"
          :data-key="item.id"
        >
          {{ item.name }}
        </div>
      </ContentBlock>
    </div>
    <RadioGroup
      class="group-sub-btn"
      :options="operationGroupData[mainIndex].children"
      :fieldNames="{ label: 'name', value: 'id' }"
      :active-key="subKey"
      width="5.625rem"
      height="1.75rem"
      align="center"
      @change="radioGroupChangeEvent"
    />
  </div>
</template>

<script>
import ContentBlock from "@/components/ContentBlock/ContentBlock.vue";
import RadioGroup from "@/components/RadioGroup/RadioGroup.vue";

export default {
  name: "OperationGroup",
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {
    ContentBlock,
    RadioGroup
  },
  data() {
    return {
      operationGroupData: [],
      mainKey: "",
      subKey: ""
    };
  },

  watch: {
    data: {
      handler(newVal) {
        this.operationGroupData = newVal;
        this.mainKey = newVal[0].id;
        this.subKey = newVal[0].children[0].id;
      },
      immediate: true
    },
    watchRelatedKey: {
      handler(newVal) {
        this.$emit("change", newVal);
      },
      immediate: true
    }
  },

  computed: {
    mainIndex() {
      const { operationGroupData, mainKey } = this;
      const index = operationGroupData.findIndex(item => item.id == mainKey);
      this.subKey = operationGroupData[index].children[0].id;
      return index;
    },
    watchRelatedKey() {
      const { mainKey, subKey } = this;
      return { mainKey, subKey };
    }
  },

  methods: {
    /**
     * 点击切换主项方法
     * @param {Object} e 切换主项事件对象
     */
    onClickSwitchMainItem(e) {
      const { mainKey, operationGroupData } = this;
      const tapKey = e.target.dataset.key;
      if (tapKey === undefined || mainKey == tapKey) return;
      this.mainKey = tapKey;
      this.subKey = operationGroupData[this.mainIndex].children[0].id;
    },

    /**
     * radio group change 事件
     * @param {String} key 切换时 key 值
     */
    radioGroupChangeEvent(key) {
      this.subKey = key;
    }
  }
};
</script>

<style lang="less" scoped>
.operation-group-container {
  display: flex;
  flex-direction: column;

  .operation-group-main-container {
    display: flex;
    align-items: center;
    padding: 0 0.625rem;
    margin-top: 0.9375rem;

    .group-main-container {
      flex-shrink: 0;
      width: 18%;
      aspect-ratio: 1/1;
      margin-left: 2%;

      .group-main-text {
        z-index: 1;
        width: 100%;
        text-align: center;
        font-size: 1.25rem;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 500;
        color: rgba(176, 224, 255, 0.6);
        line-height: 1.625rem;
        user-select: none;
      }

      .group-main-text_active {
        color: #fff;
        text-shadow: 0px 0px 6px rgba(135, 205, 255, 0.8);
      }
    }
  }

  .group-sub-btn {
    margin-top: 0.9375rem;
  }
}
</style>
